import { ROUTES } from "@/router/routes"
import styled from "@emotion/styled"
import { createPortal } from "react-dom"
import { Link } from "react-router-dom"
import { useState } from "react"
const Container = styled.div`
    position: fixed;
    bottom: 50rem;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
`

const NavsBox = styled.div`
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    overflow-x: auto;
    gap: 10rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
    padding: 0 10rem;
`

const Nav = styled(Link)`
    box-sizing: border-box;
    width: 100%;
    font-size: 16rem;
    font-family: monospace;
    color: #fff;
    text-decoration: none;
    background-color: #6e6e6e;
    padding: 5rem 10rem;
    border-radius: 2rem;
    word-break: keep-all;
    white-space: nowrap;
`

const ToggleButton = styled.button`
    width: 100rem;
    background-color: #6e6e6e;
    border-radius: 2rem;
    padding: 5rem 10rem;
    font-size: 16rem;
    font-family: monospace;
    color: #fff;
`

// 幫我做扁平 flatMap 的 routes
const routes = ROUTES.flatMap((route) => {
    if (route.children) {
        return route.children
    }
    return route
})

export function DevNavs() {
    const [isOpen, setIsOpen] = useState(false)

    return createPortal(
        <Container>
            <ToggleButton onClick={() => setIsOpen(!isOpen)}>
                {isOpen ? "Close" : "Open"}
            </ToggleButton>
            {isOpen && (
                <NavsBox>
                    {routes
                        .filter((route) => route.path)
                        .map((route) => {
                            const path = route.path?.replace(/\*$/, "") ?? ""
                            return (
                                <Nav
                                    to={path}
                                    key={route.path}
                                >
                                    {path}
                                </Nav>
                            )
                        })}
                </NavsBox>
            )}
        </Container>,
        document.body,
    )
}
